import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import Paper from "@mui/material/Paper";
import CopyToClipboard from "react-copy-to-clipboard";
import { codeStyle } from "../data.mts";

const buttonSize = 11;

export default function DataPaper(properties: {
  dKey: string;
  dValue?: string;
  openEdit: () => void;
  remove: () => void;
  text: string;
}) {
  return (
    <Paper
      sx={{
        mb: "5px",
        px: "6px",
        py: "8px",
        width: "100%",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <pre style={codeStyle}>
        <code>{properties.text}</code>
      </pre>
      <ButtonGroup size="small">
        <CopyToClipboard text={properties.dKey}>
          <Button size="small" sx={{ fontSize: buttonSize }}>
            复制键
          </Button>
        </CopyToClipboard>
        {properties.dValue ? (
          <CopyToClipboard text={properties.dValue}>
            <Button size="small" sx={{ fontSize: buttonSize }}>
              复制值
            </Button>
          </CopyToClipboard>
        ) : (
          <Button size="small" disabled sx={{ fontSize: buttonSize }}>
            复制值
          </Button>
        )}
        <Button
          size="small"
          onClick={() => {
            properties.openEdit();
          }}
          sx={{ fontSize: buttonSize }}
        >
          编辑值
        </Button>
        <Button
          size="small"
          onClick={() => {
            properties.remove();
          }}
          color="error"
          sx={{ fontSize: buttonSize }}
        >
          删除
        </Button>
      </ButtonGroup>
    </Paper>
  );
}
